import React, { useEffect, useState } from 'react';
import {
  Form,
  Input,
  Button,
  Radio,
  Select,
  Cascader,
  DatePicker,
  InputNumber,
} from 'antd';
import { addUser } from '@/api/user';

const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 8 },
};
const tailLayout = {
  wrapperCol: { offset: 4, span: 8 },
};
const UserAdd = () => {
  const [value, setValue] = useState(1);
  const onFinish = async (values: any) => {
    console.log(values);
    const { message, code } = await addUser({ ...values });
    console.log(message, code);
  };
  return (
    <>
      <Form {...layout} layout="horizontal" onFinish={onFinish}>
        <Form.Item label="姓名" name="username" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="年龄" name="age" rules={[{ required: true }]}>
          <InputNumber />
        </Form.Item>
        <Form.Item name="sex" label="性别" rules={[{ required: true }]}>
          <Radio.Group value={value}>
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="籍贯" name="Cascader">
          <Cascader
            placeholder="请选择你的籍贯"
            options={[
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                  },
                ],
              },
            ]}
          />
        </Form.Item>
        <Form.Item label="创建时间" name="date">
          <DatePicker showTime placeholder="请选择创建时间" />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};
export default UserAdd;
